<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>【新公司】3月完结 | 俊劫的学习基地</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="俊劫的学习基地是俊劫的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="俊劫,俊劫的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.5f3e1891.css" as="style"><link rel="preload" href="/assets/js/app.070ad525.js" as="script"><link rel="preload" href="/assets/js/2.1d15da37.js" as="script"><link rel="preload" href="/assets/js/19.4a02bf41.js" as="script"><link rel="preload" href="/assets/js/4.aab0e518.js" as="script"><link rel="prefetch" href="/assets/js/10.46adc9c3.js"><link rel="prefetch" href="/assets/js/11.4fa3a97f.js"><link rel="prefetch" href="/assets/js/12.d930e0cf.js"><link rel="prefetch" href="/assets/js/13.ac14e905.js"><link rel="prefetch" href="/assets/js/14.5db5f3a5.js"><link rel="prefetch" href="/assets/js/15.f912d397.js"><link rel="prefetch" href="/assets/js/16.dc881375.js"><link rel="prefetch" href="/assets/js/17.4b5e68db.js"><link rel="prefetch" href="/assets/js/18.e48da6e4.js"><link rel="prefetch" href="/assets/js/20.8437ea4c.js"><link rel="prefetch" href="/assets/js/21.618c8e36.js"><link rel="prefetch" href="/assets/js/22.097f8d74.js"><link rel="prefetch" href="/assets/js/23.512dda35.js"><link rel="prefetch" href="/assets/js/24.2afceb8f.js"><link rel="prefetch" href="/assets/js/25.a7a02005.js"><link rel="prefetch" href="/assets/js/26.a79e1590.js"><link rel="prefetch" href="/assets/js/27.d0feb2c1.js"><link rel="prefetch" href="/assets/js/28.62b630e3.js"><link rel="prefetch" href="/assets/js/29.119f3256.js"><link rel="prefetch" href="/assets/js/3.8b40c051.js"><link rel="prefetch" href="/assets/js/30.5b11ce87.js"><link rel="prefetch" href="/assets/js/31.94ce824a.js"><link rel="prefetch" href="/assets/js/32.ed4f7508.js"><link rel="prefetch" href="/assets/js/33.c74281cf.js"><link rel="prefetch" href="/assets/js/34.ffb262b0.js"><link rel="prefetch" href="/assets/js/35.ada11000.js"><link rel="prefetch" href="/assets/js/36.edb96889.js"><link rel="prefetch" href="/assets/js/37.02fd03c3.js"><link rel="prefetch" href="/assets/js/38.4e0ec907.js"><link rel="prefetch" href="/assets/js/39.8cd27589.js"><link rel="prefetch" href="/assets/js/40.e59f0b3b.js"><link rel="prefetch" href="/assets/js/41.e3da8313.js"><link rel="prefetch" href="/assets/js/42.c847d1f4.js"><link rel="prefetch" href="/assets/js/43.13c84445.js"><link rel="prefetch" href="/assets/js/44.cbaa9acf.js"><link rel="prefetch" href="/assets/js/45.cb3a266d.js"><link rel="prefetch" href="/assets/js/46.0519c642.js"><link rel="prefetch" href="/assets/js/47.3373a57e.js"><link rel="prefetch" href="/assets/js/48.7efa5760.js"><link rel="prefetch" href="/assets/js/49.923721c8.js"><link rel="prefetch" href="/assets/js/5.07f41da3.js"><link rel="prefetch" href="/assets/js/50.839ac91d.js"><link rel="prefetch" href="/assets/js/51.f98cecb2.js"><link rel="prefetch" href="/assets/js/52.041f20b3.js"><link rel="prefetch" href="/assets/js/53.9464df60.js"><link rel="prefetch" href="/assets/js/54.a9ce67d2.js"><link rel="prefetch" href="/assets/js/55.9733d4b3.js"><link rel="prefetch" href="/assets/js/56.e67c1aa1.js"><link rel="prefetch" href="/assets/js/57.1335a8a7.js"><link rel="prefetch" href="/assets/js/58.83f617d8.js"><link rel="prefetch" href="/assets/js/59.b74c2845.js"><link rel="prefetch" href="/assets/js/6.dcf50b6e.js"><link rel="prefetch" href="/assets/js/60.6e3b00bd.js"><link rel="prefetch" href="/assets/js/61.cd335db9.js"><link rel="prefetch" href="/assets/js/62.ee277d48.js"><link rel="prefetch" href="/assets/js/63.2a34cfa5.js"><link rel="prefetch" href="/assets/js/64.a51989fe.js"><link rel="prefetch" href="/assets/js/65.3abfaea5.js"><link rel="prefetch" href="/assets/js/66.d4f35c55.js"><link rel="prefetch" href="/assets/js/67.2f070f74.js"><link rel="prefetch" href="/assets/js/68.c7da856f.js"><link rel="prefetch" href="/assets/js/69.6c15fcd4.js"><link rel="prefetch" href="/assets/js/7.10c46d97.js"><link rel="prefetch" href="/assets/js/70.68b6cf93.js"><link rel="prefetch" href="/assets/js/71.c49db210.js"><link rel="prefetch" href="/assets/js/72.7ffae8af.js"><link rel="prefetch" href="/assets/js/73.abb40ede.js"><link rel="prefetch" href="/assets/js/74.71723883.js"><link rel="prefetch" href="/assets/js/75.ab7e2e75.js"><link rel="prefetch" href="/assets/js/76.936112a6.js"><link rel="prefetch" href="/assets/js/8.ec9c3735.js"><link rel="prefetch" href="/assets/js/9.b555605d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.5f3e1891.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-2c41f3eb data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-2c41f3eb><img src="/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-2c41f3eb></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="俊劫的学习基地" class="logo"> <span class="site-name">俊劫的学习基地</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/img/logo.png" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    俊劫
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>54</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    just do it
  </div> <!----></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-算法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-1</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-2</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2021-3</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/416517735bb6/" aria-current="page" class="active sidebar-link">【新公司】3月完结</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-4</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-5</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-2"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/categories/?category=%E5%AD%A6%E4%B9%A0%E6%89%93%E5%8D%A1" title="分类" data-v-13f19dad>学习打卡</a></li> <li data-v-13f19dad><a href="/categories/?category=2021-3" title="分类" data-v-13f19dad>2021-3</a></li> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>俊劫</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2021/03/31 00:00:00</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            【新公司】3月完结
          </h1> <div class="theme-vdoing-content content__default"><blockquote><p>新的一个月，新的开始，新的公司，新的环境，冲冲冲，rushB！！！</p></blockquote> <h2 id="flag"><a href="#flag" class="header-anchor">#</a> flag</h2> <ul><li>晚上不吃饭减肥搞起来</li> <li>周3周5 6点下班，跑步回家</li> <li>每天晚上回家刷一道算法题</li></ul> <h2 id="_3-31"><a href="#_3-31" class="header-anchor">#</a> 3.31</h2> <h3 id="番茄🍅工作法"><a href="#番茄🍅工作法" class="header-anchor">#</a> 番茄🍅工作法</h3> <p>简单感受了一下，真的很好用。养成习惯，冲冲冲！！！！</p> <h3 id="rfm模型"><a href="#rfm模型" class="header-anchor">#</a> RFM模型</h3> <ul><li>最近一次消费 (Recency)</li> <li>消费频率 (Frequency)</li> <li>消费金额 (Monetary)</li></ul> <p>RFM模型是衡量客户价值和客户创利能力的重要工具和手段。在众多的客户关系管理(CRM)的分析模式中，RFM模型是被广泛提到的。</p> <p>该机械模型通过一个客户的近期购买行为、购买的总体频率以及花了多少钱</p> <p>3项指标来描述该客户的价值状况。</p> <h3 id="object-position-雪碧图定位很好使"><a href="#object-position-雪碧图定位很好使" class="header-anchor">#</a> object-position(雪碧图定位很好使)</h3> <p>指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>object<span class="token operator">-</span>position<span class="token operator">:</span> <span class="token number">50</span><span class="token operator">%</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
object<span class="token operator">-</span>position<span class="token operator">:</span> right top<span class="token punctuation">;</span>
object<span class="token operator">-</span>position<span class="token operator">:</span> left bottom<span class="token punctuation">;</span>
object<span class="token operator">-</span>position<span class="token operator">:</span> <span class="token number">250</span>px <span class="token number">125</span>px<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="object-fit"><a href="#object-fit" class="header-anchor">#</a> object-fit</h3> <p>object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。</p> <p>object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。</p> <p><code>object-fit: fill(默认，填充整个容器)|contain(原有比例，缩放)|cover（原有比例，放大）|scale-down(等比例缩放)|none|initial|inherit;</code></p> <h2 id="_3-30"><a href="#_3-30" class="header-anchor">#</a> 3.30</h2> <h3 id="git-submoulde"><a href="#git-submoulde" class="header-anchor">#</a> git submoulde</h3> <p>Git Submodule 允许一个git仓库，作为另一个git仓库的子目录，并且保持父项目和子项目相互独立</p> <h3 id="chrome-您的连接不是私密连接"><a href="#chrome-您的连接不是私密连接" class="header-anchor">#</a> chrome 您的连接不是私密连接</h3> <p>保持单签页面不动，直接键盘输入：thisisunsafe    页面会自动刷新，就好了</p> <h2 id="_3-29"><a href="#_3-29" class="header-anchor">#</a> 3.29</h2> <h3 id="object-entries"><a href="#object-entries" class="header-anchor">#</a> Object.entries</h3> <p>返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> object1 <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token operator">:</span> <span class="token string">'somestring'</span><span class="token punctuation">,</span>
  b<span class="token operator">:</span> <span class="token number">42</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// Object.entries(object1)   [Array(2), Array(2)]</span>
<span class="token comment">// 直接for of遍历会报错，Error: object1 is not iterable</span>
用Object<span class="token punctuation">.</span>entries包装一下，作用和<span class="token keyword">for</span> <span class="token keyword">in</span>相同
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span> <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>object1<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// expected output:</span>
<span class="token comment">// &quot;a: somestring&quot;</span>
<span class="token comment">// &quot;b: 42&quot;</span>
<span class="token comment">// order is not guaranteed</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="项目发布流程"><a href="#项目发布流程" class="header-anchor">#</a> 项目发布流程</h3> <h3 id="前端基础建设与架构学习"><a href="#前端基础建设与架构学习" class="header-anchor">#</a> 前端基础建设与架构学习</h3> <p>准备输出一篇文章</p> <h2 id="_3-28"><a href="#_3-28" class="header-anchor">#</a> 3.28</h2> <h3 id="逛街"><a href="#逛街" class="header-anchor">#</a> 逛街</h3> <p>逛完街，回家吵架，美滋滋</p> <h3 id="吵架"><a href="#吵架" class="header-anchor">#</a> 吵架</h3> <p>逛得自己走累了，忽然不走了</p> <p>东西没买，说没有逛街的感觉</p> <h2 id="_3-27"><a href="#_3-27" class="header-anchor">#</a> 3.27</h2> <h3 id="搭建博客"><a href="#搭建博客" class="header-anchor">#</a> 搭建博客</h3> <p>帮别人搭建个博客，结果自动化平台一直有问题，也没查出来，就换成了手动</p> <h3 id="收拾屋子"><a href="#收拾屋子" class="header-anchor">#</a> 收拾屋子</h3> <p>搬家还有些东西没有搞，简单搞一搞。</p> <h3 id="吵架-2"><a href="#吵架-2" class="header-anchor">#</a> 吵架</h3> <p>女朋友上班，我在家，我没去地铁口（小区门口）接她，被喷。</p> <h2 id="_3-26"><a href="#_3-26" class="header-anchor">#</a> 3.26</h2> <h3 id="onclick函数绑定用"><a href="#onclick函数绑定用" class="header-anchor">#</a> onClick函数绑定用()=&gt;{}</h3> <p>原因： react不会自动绑定函数</p> <p><code>&lt;Button type=&quot;primary&quot; onClick={() =&gt; {handleGo(&quot;/home&quot;)}}&gt;</code></p> <h3 id="ts-为对象动态分配属性"><a href="#ts-为对象动态分配属性" class="header-anchor">#</a> ts 为对象动态分配属性</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// js可以正常修改, ts修改会报错，没有name</span>
<span class="token keyword">let</span> developer <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
developer<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;semlinker&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 可以这样写: 索引签名</span>
<span class="token comment">// 也可以使用 TypeScript 内置的工具类型 Record 来定义 Developer 接口</span>
<span class="token keyword">interface</span> <span class="token class-name">LooseObject</span> <span class="token punctuation">{</span>
  <span class="token comment">// 可以接受 key 类型是字符串，值的类型是 any 类型的字段</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> any
<span class="token punctuation">}</span>
<span class="token comment">// or</span>
<span class="token keyword">interface</span> <span class="token class-name">LooseObject</span> <span class="token keyword">extends</span> <span class="token class-name">Record</span><span class="token operator">&lt;</span>string<span class="token punctuation">,</span> any<span class="token operator">&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">let</span> developer<span class="token operator">:</span> LooseObject <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
developer<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;semlinker&quot;</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="new-url"><a href="#new-url" class="header-anchor">#</a> new URL</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">&quot;http://192.168.10.2:8888/admin/#/login&quot;</span><span class="token punctuation">)</span>
<span class="token comment">// URL {origin: &quot;http://192.168.10.2:8888&quot;, protocol: &quot;http:&quot;, username: &quot;&quot;, password: &quot;&quot;, host: &quot;192.168.10.2:8888&quot;, …}</span>
<span class="token comment">// hash: &quot;#/login&quot;</span>
<span class="token comment">// host: &quot;192.168.10.2:8888&quot;</span>
<span class="token comment">// hostname: &quot;192.168.10.2&quot;</span>
<span class="token comment">// href: &quot;http://192.168.10.2:8888/admin/#/login&quot;</span>
<span class="token comment">// origin: &quot;http://192.168.10.2:8888&quot;</span>
<span class="token comment">// password: &quot;&quot;</span>
<span class="token comment">// pathname: &quot;/admin/&quot;</span>
<span class="token comment">// port: &quot;8888&quot;</span>
<span class="token comment">// protocol: &quot;http:&quot;</span>
<span class="token comment">// search: &quot;&quot;</span>
<span class="token comment">// searchParams: URLSearchParams {}</span>
<span class="token comment">// username: &quot;&quot;</span>
<span class="token comment">// __proto__: URL</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="_3-25"><a href="#_3-25" class="header-anchor">#</a> 3.25</h2> <h3 id="拉钩教育学起来"><a href="#拉钩教育学起来" class="header-anchor">#</a> 拉钩教育学起来</h3> <p>前端基础建设与架构 30 讲</p> <h3 id="折腾自己的项目"><a href="#折腾自己的项目" class="header-anchor">#</a> 折腾自己的项目</h3> <p>先按照自己异想天开的需求写，不管性能优化，最后再来一波优化方面的。想的很美</p> <h3 id="isnil-value"><a href="#isnil-value" class="header-anchor">#</a> _.isNil(value)</h3> <p>检查 value 是否是 null 或者 undefined</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>_<span class="token punctuation">.</span><span class="token function">isNil</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// =&gt; true</span>
 
_<span class="token punctuation">.</span><span class="token function">isNil</span><span class="token punctuation">(</span><span class="token keyword">void</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// =&gt; true</span>
 
_<span class="token punctuation">.</span><span class="token function">isNil</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// =&gt; false</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="react-classnames库"><a href="#react-classnames库" class="header-anchor">#</a> React-classnames库</h3> <p>由于react原生动态添加多个className会报错,简单理解就是个凭接classnames的</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">classNames</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> bar<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> duck<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'baz'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> quux<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; 'foo bar baz quux'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="_3-24"><a href="#_3-24" class="header-anchor">#</a> 3.24</h2> <h3 id="反思了半天"><a href="#反思了半天" class="header-anchor">#</a> 反思了半天</h3> <p>也不知道都干了啥，短期目标搞起来！</p> <h3 id="节流"><a href="#节流" class="header-anchor">#</a> 节流</h3> <p>一段时间内，只执行一次回调函数。并不是只执行第一次的函数，概念有点搞混淆了</p> <h3 id="lodash-difference"><a href="#lodash-difference" class="header-anchor">#</a> lodash difference</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// _.difference(array, [values])</span>
<span class="token comment">// array (Array): 要检查的数组。</span>
<span class="token comment">// [values] (...Array): 排除的值。</span>
_<span class="token punctuation">.</span><span class="token function">difference</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// =&gt; [3, 1]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="_3-23"><a href="#_3-23" class="header-anchor">#</a> 3.23</h2> <h3 id="算法打卡"><a href="#算法打卡" class="header-anchor">#</a> 算法打卡</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>实现 <span class="token function">strStr</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 函数。

给定一个 haystack 字符串和一个 needle 字符串，在 haystack 字符串中找出 needle <span class="token function">字符串出现的第一个位置</span> <span class="token punctuation">(</span>从<span class="token number">0</span>开始<span class="token punctuation">)</span>。如果不存在，则返回  <span class="token operator">-</span><span class="token number">1</span>。

示例 <span class="token number">1</span><span class="token operator">:</span>

输入<span class="token operator">:</span> haystack <span class="token operator">=</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> needle <span class="token operator">=</span> <span class="token string">&quot;ll&quot;</span>
输出<span class="token operator">:</span> <span class="token number">2</span>
示例 <span class="token number">2</span><span class="token operator">:</span>

输入<span class="token operator">:</span> haystack <span class="token operator">=</span> <span class="token string">&quot;aaaaa&quot;</span><span class="token punctuation">,</span> needle <span class="token operator">=</span> <span class="token string">&quot;bba&quot;</span>
输出<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span>

<span class="token comment">// 解法一</span>
<span class="token keyword">var</span> <span class="token function-variable function">strStr</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">haystack<span class="token punctuation">,</span> needle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 双指针</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>needle <span class="token operator">===</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> haystack<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 先找第一位相等的</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>haystack<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">===</span> needle<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> needle<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>haystack<span class="token punctuation">[</span>i <span class="token operator">+</span> j<span class="token punctuation">]</span> <span class="token operator">!==</span> needle<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果haystack下一位 和 needle中的不相等，当前i作废，开始下一轮循环</span>
                    flag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
            <span class="token comment">// 循环没有break，当前i有效</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token keyword">return</span> i
        <span class="token punctuation">}</span>

    <span class="token punctuation">}</span>
    <span class="token comment">// 循环结束没有找到，就没有</span>
    <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 解法二</span>
<span class="token keyword">var</span> <span class="token function-variable function">strStr</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">haystack<span class="token punctuation">,</span> needle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>needle <span class="token operator">===</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> haystack<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>haystack<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">===</span> needle<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>haystack<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> i <span class="token operator">+</span> needle<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token operator">===</span> needle<span class="token punctuation">)</span> <span class="token keyword">return</span> i<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 解法三</span>
<span class="token keyword">var</span> <span class="token function-variable function">strStr</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">haystack<span class="token punctuation">,</span> needle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> haystack<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>needle<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><h3 id="资源分享文章输出"><a href="#资源分享文章输出" class="header-anchor">#</a> 资源分享文章输出</h3> <p>对自己的资源做一个整理，chrome标签都该处理一下了，各种统计都要处理一遍</p> <h3 id="前端监控"><a href="#前端监控" class="header-anchor">#</a> 前端监控</h3> <p>对这块了解的很少</p> <ul><li>监控系统：日志采集、日志存储、统计与分析、报告和警告</li> <li>全局错误监听：onerror/error / unhandledrejection (可捕获promise错误)  vue: errorHandle  react: ErrorBoundary</li> <li>单点报错：try…catch</li></ul> <h4 id="监听ajax请求"><a href="#监听ajax请求" class="header-anchor">#</a> 监听ajax请求</h4> <ul><li>window.addEventListener(&quot;ajaxLoadStart&quot;, () =&gt; {console.log('ajaxLoadStart')})</li> <li>window.addEventListener(&quot;ajaxLoadEnd&quot;, () =&gt; {})</li></ul> <h2 id="_3-22"><a href="#_3-22" class="header-anchor">#</a> 3.22</h2> <h3 id="减肥计划"><a href="#减肥计划" class="header-anchor">#</a> 减肥计划</h3> <p>天气终于晴了，冲冲冲！</p> <ul><li>早睡,早起学习</li> <li>早上自行车上班,晚上跑步回家（5KM）</li> <li>早上不吃，中午一顿，晚上不吃</li> <li>卸载手机和iPad无用软件</li> <li>坚持一个月到五一，看看效果</li></ul> <h3 id="缓存优先级"><a href="#缓存优先级" class="header-anchor">#</a> 缓存优先级</h3> <p>强缓存：主要字段有（expires：date（过期日期）、cache-control： max-age=time（毫秒数，多久之后过期） |no-cache|no-store）。如果expires和cache-control同时存在，cache-control会覆盖expires。建议两个都写，cache-control是http1.1的头字段，expires是http1.0的头字段，都写兼容会好点。</p> <p>协商缓存：对比缓存Etag和Last-Modified同时存在时，则Etag会覆盖Last-Modified，Last-Modified不会生效。即：ETag优先级 &gt; Last-Modified优先级</p> <p><img src="http://zcy-cdn.oss-cn-shanghai.aliyuncs.com/f2e-assets/c3c22890-140e-4cef-9999-068585b6c31c.jpg?x-oss-process=image/quality,Q_75" alt="http缓存"></p> <h3 id="忽略ts报错"><a href="#忽略ts报错" class="header-anchor">#</a> 忽略TS报错</h3> <p>报错上一行使用：<code>// @ts-ignore</code></p> <h3 id="react-版本不一致报错"><a href="#react-版本不一致报错" class="header-anchor">#</a> react 版本不一致报错</h3> <ul><li><a href="https://reactjs.bootcss.com/warnings/invalid-hook-call-warning.html" target="_blank" rel="noopener noreferrer">React 和 React DOM 版本不匹配<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>使用npm ls react 查看当前项目使用的react版本</li> <li>创建别名：<code>react: '../../node_modules/react'</code> 将react指向本地包地址</li></ul> <h3 id="vue-react-选型"><a href="#vue-react-选型" class="header-anchor">#</a> vue &amp; react 选型</h3> <ul><li><a href="https://www.infoq.cn/article/vxmggwtukgtkoemswtqa" target="_blank" rel="noopener noreferrer">React 还是 Vue：选哪个？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>vue简单更轻量，react生态更强大，更适合大型项目。所以很多公司的选型是react（PC），vue（mobile）</li> <li>作为前端，两者都会才更具竞争力</li></ul> <h2 id="_3-21"><a href="#_3-21" class="header-anchor">#</a> 3.21</h2> <h3 id="for-in-of"><a href="#for-in-of" class="header-anchor">#</a> for in &amp; of</h3> <ul><li><code>in key of value</code></li> <li>直接用for of遍历对象会报错，遍历Set类型的对象可以，因为是包含了迭代器</li></ul> <h3 id="辅导"><a href="#辅导" class="header-anchor">#</a> 辅导</h3> <p>帮别人辅导的同时也能发现自己遗漏的一些知识点，冲冲冲</p> <h2 id="_3-20"><a href="#_3-20" class="header-anchor">#</a> 3.20</h2> <h3 id="router-和-route区别"><a href="#router-和-route区别" class="header-anchor">#</a> $router 和 $route区别</h3> <ul><li>router为VueRouter的实例</li> <li>route相当于当前正在跳转的路由对象,可以从里面获取name,path,params,query</li></ul> <h3 id="javascript-中精度问题以及解决方案"><a href="#javascript-中精度问题以及解决方案" class="header-anchor">#</a> JavaScript 中精度问题以及解决方案</h3> <h4 id="解决思路"><a href="#解决思路" class="header-anchor">#</a> 解决思路</h4> <ul><li>考虑到每次浮点数运算的偏差非常小(其实不然)，可以对结果进行指定精度的四舍五入</li> <li>将浮点数转为整数运算，再对结果做除法。比如0.1 + 0.2，可以转化为(1*2)/3</li> <li>把浮点数转化为字符串，模拟实际运算的过程 <code>最佳方式</code> leetcode有对应的题目</li></ul> <h2 id="_3-19"><a href="#_3-19" class="header-anchor">#</a> 3.19</h2> <h3 id="制定培训计划"><a href="#制定培训计划" class="header-anchor">#</a> 制定培训计划</h3> <p>带一个人学习，过段时间看看效果吧</p> <h3 id="删除远端分支"><a href="#删除远端分支" class="header-anchor">#</a> 删除远端分支</h3> <p><code>git push origin --delete &lt;branchName&gt;</code></p> <h3 id="react-context"><a href="#react-context" class="header-anchor">#</a> React Context</h3> <p>组件树逐层传递，用prop很麻烦，这个时候可以用context</p> <h4 id="创建"><a href="#创建" class="header-anchor">#</a> 创建</h4> <p><code>const ThemeContext = React.createContext('light');</code></p> <h4 id="provider"><a href="#provider" class="header-anchor">#</a> Provider</h4> <p>使用一个 Provider 来将当前的 theme 传递给以下的组件树。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>ThemeContext<span class="token punctuation">.</span>Provider value<span class="token operator">=</span><span class="token string">&quot;dark&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Toolbar <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>ThemeContext<span class="token punctuation">.</span>Provider<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="consumer"><a href="#consumer" class="header-anchor">#</a> Consumer</h4> <p>指定 contextType 读取当前的 theme context。</p> <p>React 会往上找到最近的 theme Provider，然后使用它的值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">static</span> contextType <span class="token operator">=</span> ThemeContext<span class="token punctuation">;</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span>Button theme<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="_3-18"><a href="#_3-18" class="header-anchor">#</a> 3.18</h2> <h3 id="npm包创建软连接"><a href="#npm包创建软连接" class="header-anchor">#</a> npm包创建软连接</h3> <ul><li>组件库： npm link    npm unlink</li> <li>项目：npm link 包名称</li></ul> <h3 id="灰度环境"><a href="#灰度环境" class="header-anchor">#</a> 灰度环境</h3> <p>三种理解：</p> <ol><li><p>更新过程可以暂停，停在一个既有新版本又有旧版本的状态，然后选择升级或者回滚</p></li> <li><p>支持流量比例分配，可以把百分之几的流量分配给一个服务，剩下的给另一个服务</p></li> <li><p>支持 url 路径流量分配，一个路径下的流量给一个服务，另一个路径流量给另一个服务</p></li></ol> <p><a href="https://istio.io/latest/zh/docs/concepts/what-is-istio/" target="_blank" rel="noopener noreferrer">Istio 是什么<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>: 开源的服务网格,作为透明的一层接入到现有的分布式应用程序里.流量管理可以用于灰度的控制</p> <p><a href="https://tech.youzan.com/gray-deloyments-and-blue-green-deployments-practices-in-youzan/" target="_blank" rel="noopener noreferrer">有赞灰度发布与蓝绿发布实践<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><img src="https://tech.youzan.com/content/images/2019/12/canary-spec.png" alt=""></p> <h2 id="_3-17"><a href="#_3-17" class="header-anchor">#</a> 3.17</h2> <h3 id="proptypes"><a href="#proptypes" class="header-anchor">#</a> PropTypes</h3> <p><code>import PropTypes from 'prop-types';</code></p> <ul><li>常见类型校验：函数（PropTypes.func）</li> <li>PropTypes.func.isRequired  这个 prop 没有被提供时，会打印警告信息。</li></ul> <h3 id="lodash-merge-手写一个试试"><a href="#lodash-merge-手写一个试试" class="header-anchor">#</a> lodash merge  手写一个试试？</h3> <p>对象合并,递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象,undefined会直接跳过。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> object <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token string">'a'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token string">'b'</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">'d'</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
 
<span class="token keyword">var</span> other <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token string">'a'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token string">'c'</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">'e'</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
 
_<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> other<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// =&gt; { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="_3-16"><a href="#_3-16" class="header-anchor">#</a> 3.16</h2> <h3 id="usecallback"><a href="#usecallback" class="header-anchor">#</a> useCallback</h3> <h4 id="定义"><a href="#定义" class="header-anchor">#</a> 定义</h4> <p>返回一个 memoized 回调函数。在依赖参数不变的情况下，返回的回调函数是同一个引用地址</p> <p>父组件将一个方法传递给子组件，若父组件的其他状态发生变化时，子组件也会跟着渲染多次，会造成性能浪费； usecallback是将父组件传给子组件的方法给缓存下来，只有当 usecallback中的第二个参数状态变化时，子组件才重新渲染；</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> memoizedCallback <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">doSomething</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="场景"><a href="#场景" class="header-anchor">#</a> 场景</h4> <p>优化子组件渲染次数</p> <h4 id="区别"><a href="#区别" class="header-anchor">#</a> 区别</h4> <p>useCallback缓存函数的引用，useMemo缓存计算数据的值</p> <p>useEffect，usecallback，useMemo中都有第二个参数，若第二个参数代表的依赖项发生变化则重新渲染，不变化则不渲染更新</p> <h4 id="usememo"><a href="#usememo" class="header-anchor">#</a> useMemo</h4> <p>父组件将一个值传递给子组件，若父组件的其他值发生变化时，子组件也会跟着渲染多次，会造成性能浪费； useMemo是将父组件传递给子组件的值缓存起来，只有当 useMemo中的第二个参数状态变化时，子组件才重新渲染；</p> <h3 id="commonjs和es-module"><a href="#commonjs和es-module" class="header-anchor">#</a> CommonJs和Es Module</h3> <h4 id="解决什么问题"><a href="#解决什么问题" class="header-anchor">#</a> 解决什么问题?</h4> <ul><li>解决变量污染问题，每个文件都是独立的作用域，所以不存在变量污染</li> <li>解决代码维护问题，一个文件里代码非常清晰</li> <li>解决文件依赖问题，(传统方法不注意顺序引入错，代码全报错)</li></ul> <h4 id="commonjs"><a href="#commonjs" class="header-anchor">#</a> CommonJs</h4> <ul><li>odule.exports &amp; require</li> <li>导入的值是拷贝的，所以可以修改拷贝值，和内部互不影响</li> <li>用的地方声明就可以</li></ul> <h4 id="es-module"><a href="#es-module" class="header-anchor">#</a> Es Module</h4> <ul><li>单个导出(export)、默认导出(export default)</li> <li>导入import, import * as x from 'xxx'</li> <li>export导出的值是值的引用，修改会缓存，不可以重新赋值（报错）</li> <li>只能声明在该文件的最顶部</li></ul> <h2 id="_3-15"><a href="#_3-15" class="header-anchor">#</a> 3.15</h2> <h3 id="static-getderivedstatefromprops-props-state"><a href="#static-getderivedstatefromprops-props-state" class="header-anchor">#</a> static getDerivedStateFromProps(props, state)</h3> <p>getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。<code>它应返回一个对象来更新 state</code>，如果返回 null 则不更新任何内容</p> <h3 id="react-forceupdate"><a href="#react-forceupdate" class="header-anchor">#</a> react forceUpdate</h3> <p>默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。</p> <p>调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()</p> <p>通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state</p> <h3 id="react-错误处理生命周期"><a href="#react-错误处理生命周期" class="header-anchor">#</a> react 错误处理生命周期</h3> <p>当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：</p> <ul><li>static getDeriveStateFormError</li> <li>componentDidCatch</li></ul> <h3 id="dubbo"><a href="#dubbo" class="header-anchor">#</a> dubbo</h3> <p>Dubbo(读音[ˈdʌbəʊ])是阿里巴巴公司开源的一个高性能优秀的服务框架，使得应用可通过高性能的RPC 实现服务的输出和输入功能，可以和 Spring框架无缝集成。 Dubbo是一款高性能、轻量级的开源Java RPC框架，它提供了三大核心能力：面向接口的远程方法调用，智能容错和负载均衡，以及服务自动注册和发现。</p> <h3 id="react控制元素显示和隐藏"><a href="#react控制元素显示和隐藏" class="header-anchor">#</a> React控制元素显示和隐藏</h3> <ul><li>第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。</li> <li>第二种是通过style控制display属性，类似vue 中的v-show。</li> <li>第三种是通过动态切换className。</li></ul> <h2 id="_3-14"><a href="#_3-14" class="header-anchor">#</a> 3.14</h2> <p>react + ts 项目实战视频学习</p> <h2 id="_3-13"><a href="#_3-13" class="header-anchor">#</a> 3.13</h2> <p>react + ts 项目实战视频学习</p> <h2 id="_3-12"><a href="#_3-12" class="header-anchor">#</a> 3.12</h2> <h3 id="react-connect"><a href="#react-connect" class="header-anchor">#</a> react connect</h3> <p>连接React组件与 Redux store</p> <h3 id="小技巧-判断"><a href="#小技巧-判断" class="header-anchor">#</a> 小技巧，判断</h3> <p>eg：给某个变量赋值，但是不能小于或者大于1的情况
<code>Math.max(1, state.enthusiasmLevel - 1)</code></p> <h3 id="types"><a href="#types" class="header-anchor">#</a> @types</h3> <p>@types下是一些包的声明文件，ts运行必须要</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> user<span class="token operator">:</span> User <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;lucifer&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>TypeScript 编译器先在当前编译上下文找 User 的定义。</p> <p>如果找不到，则会去 node_modules 中的@types （默认情况，目录可以修改，后面会提到）目录下去寻找对应包名的模块声明文件。</p> <h3 id="typeroots"><a href="#typeroots" class="header-anchor">#</a> typeRoots</h3> <p>用来指定默认的类型声明文件查找路径，默认为node_modules/@types, 指定typeRoots后，TypeScript 编译器会从指定的路径去引入声明文件</p> <h3 id="types-2"><a href="#types-2" class="header-anchor">#</a> types</h3> <p>TypeScript 编译器会默认引入typeRoot下所有的声明文件，但是有时候我们并<strong>不希望全局引入所有定义</strong>，而是仅引入部分模块。这种情景下可以通过types指定模块名只引入我们想要的模块，比如以下只会引入 jquery 的声明文件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token string">&quot;compilerOptions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;types&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;jquery&quot;</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="enzyme"><a href="#enzyme" class="header-anchor">#</a> Enzyme</h3> <p>Enzyme是React生态系统里一个通用工具，它方便了针对组件的行为编写测试</p> <h3 id="ts-断言"><a href="#ts-断言" class="header-anchor">#</a> ts 断言</h3> <p>当你比类型检查器更清楚一个<code>表达式的类型</code>的时候，你可以通过这种方式通知TypeScript。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Hello name<span class="token operator">=</span><span class="token string">&quot;TypeScript&quot;</span> enthusiasmLevel<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLElement
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="纯函数"><a href="#纯函数" class="header-anchor">#</a> 纯函数</h3> <p>即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。</p> <h3 id="副作用"><a href="#副作用" class="header-anchor">#</a> 副作用</h3> <p>阮一峰：所谓&quot;<code>副作用</code>&quot;（side effect），指的是函数内部与外部互动（最典型的情况，就是修改全局变量的值），产生运算以外的其他结果。 函数式编程强调<code>没有&quot;副作用&quot;</code>，意味着函数要保持独立，<code>所有功能就是返回一个新的值，没有其他行为，尤其是不得修改外部变量的值。</code></p> <p>在函数式编程的教材中，如下的行为是称之为副作用的：</p> <ul><li>修改一个变量</li> <li>修改一个对象的字段值</li> <li>抛出异常</li> <li>在控制台显示信息、从控制台接收输入</li> <li>在屏幕上显示（GUI）</li> <li>读写文件、网络、数据库。</li></ul> <h3 id="import"><a href="#import" class="header-anchor">#</a> import</h3> <p>静态的import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ，导入的模块都运行在严格模式下。在浏览器中，import 语句只能在声明了 type=&quot;module&quot; 的 script 的标签中使用。</p> <p>还有一个类似函数的动态 import()，它不需要依赖 type=&quot;module&quot; 的script标签。</p> <h4 id="导入整个模块"><a href="#导入整个模块" class="header-anchor">#</a> 导入整个模块</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> myModule <span class="token keyword">from</span> <span class="token string">'/modules/my-module.js'</span><span class="token punctuation">;</span>

<span class="token comment">// 调用</span>
myModule<span class="token punctuation">.</span><span class="token function">doAllTheAmazingThings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="导入时重命名多个接口"><a href="#导入时重命名多个接口" class="header-anchor">#</a> 导入时重命名多个接口</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
  reallyReallyLongModuleMemberName <span class="token keyword">as</span> shortName<span class="token punctuation">,</span>
  anotherLongModuleName <span class="token keyword">as</span> short
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/modules/my-module.js'</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="动态导入"><a href="#动态导入" class="header-anchor">#</a> 动态导入</h4> <p>关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'/modules/my-module.js'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">module</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// Do something with the module.</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// or</span>
<span class="token keyword">let</span> module <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'/modules/my-module.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="_3-11"><a href="#_3-11" class="header-anchor">#</a> 3.11</h2> <h3 id="array-map-生成节点"><a href="#array-map-生成节点" class="header-anchor">#</a> Array.map 生成节点</h3> <p>项目很多节点都是 map 生成的，想着 map 返回的是一个数组，怎么就变成节点了呢，试了一下，还真的是</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;JJ&quot;</span><span class="token punctuation">,</span> company<span class="token operator">:</span> <span class="token string">&quot;youzan&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;KK&quot;</span><span class="token punctuation">,</span> company<span class="token operator">:</span> <span class="token string">&quot;ali&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;XY&quot;</span><span class="token punctuation">,</span> company<span class="token operator">:</span> <span class="token string">&quot;weiyi&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;SQ&quot;</span><span class="token punctuation">,</span> company<span class="token operator">:</span> <span class="token string">&quot;dxy&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span><span class="token operator">&gt;</span>
      <span class="token punctuation">{</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token operator">&lt;</span>h3 key<span class="token operator">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>v<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="react-fragment"><a href="#react-fragment" class="header-anchor">#</a> React.Fragment</h3> <p>简单理解就是对标签进行分组，简写<code>&lt;&gt; &lt;/&gt;</code>,不支持 key 或属性</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Columns</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span>Hello<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span>World<span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="node-bff"><a href="#node-bff" class="header-anchor">#</a> node bff</h3> <p>之前在微医根本不会接触到这些东西，第一次搞，有点懵。。。</p> <p>有赞这边，我接触的两个 pc 项目都用 node 去包装了一层接口，后端只需要提供<code>com.youzan.xxxx.xxxx.server</code>以及后端的一个方法名称，前端用 node 去包装一个接口，暴露给静态应用使用。省去了很多后端的活，很多人接触的都是后端直接给个 api 的形式。用 bff，我们前端可以自己去包装接口，后端只需要提供业务逻辑方法即可。</p> <h3 id="ts-never-类型"><a href="#ts-never-类型" class="header-anchor">#</a> ts never 类型</h3> <p>项目代码中很多结构的写法，比如</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">fetchXXX</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> c <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// b.x = 1; 报错，编辑器提示说never类型不允许赋值number，网上查说可以用 b['x']，试了没用</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    dataA<span class="token operator">:</span> a<span class="token punctuation">,</span>
    dataB<span class="token operator">:</span> b<span class="token punctuation">,</span>
    dataC<span class="token operator">:</span> c<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>还没解决，记录下来问大佬们</p> <h2 id="_3-10"><a href="#_3-10" class="header-anchor">#</a> 3.10</h2> <h3 id="项目熟悉"><a href="#项目熟悉" class="header-anchor">#</a> 项目熟悉</h3> <p>流程上和上家公司有部分相似，慢慢适应，接了一个小活，有事情干了，冲冲冲</p> <h3 id="react-fc"><a href="#react-fc" class="header-anchor">#</a> React.FC&lt;&gt;</h3> <p>React 的组件可以定义为 函数（React.FC&lt;&gt;）或 class（继承 React.Component） 的形式。</p> <ul><li>React.FC 是函数式组件，是在 TypeScript 使用的一个泛型，FC 就是 FunctionComponent 的缩写，事实上 React.FC 可以写成 React.FunctionComponent</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> App<span class="token operator">:</span> React<span class="token punctuation">.</span>FunctionComponent<span class="token operator">&lt;</span><span class="token punctuation">{</span> message<span class="token operator">:</span> string <span class="token punctuation">}</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span>message<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>使用 React.FC 来写 React 组件的时候，是不能用 setState 的，取而代之的是 useState()、useEffect 等 Hook API</li> <li>React.FC 包含了 PropsWithChildren 的泛型</li></ul> <h2 id="_3-9-入职"><a href="#_3-9-入职" class="header-anchor">#</a> 3.9 入职</h2> <h3 id="新人报道-流水账"><a href="#新人报道-流水账" class="header-anchor">#</a> 新人报道，流水账</h3> <ul><li>9：30 来了好多特警，查的挺严的。貌似是因为买家和卖家的问题，闹到了有赞。</li> <li>9：30 - 11：00 新人培训，各种账号，流程</li> <li>11：30 - 13：30 工位搞搞</li> <li>13：30 下午继续培训</li> <li>发笔记本：M1 的 Mac Book Pro</li> <li>IT 小哥相关介绍</li> <li>合同相关</li> <li>最后一个小活动 团队活动：所有新人一起拍个抖音视频 个人活动：找有伴（导师），TL，HRBP，有缘人拍合照，发到公司全员群</li></ul> <h3 id="技术相关"><a href="#技术相关" class="header-anchor">#</a> 技术相关</h3> <p>react17 + typescript 边学边写，压力比较大，成长应该也是最快的，冲冲冲。</p> <h2 id="_3-8"><a href="#_3-8" class="header-anchor">#</a> 3.8</h2> <p>搬家 + 收拾家</p> <p>体检报告出来了，验血有个指标 ALT 的，正常 50 以内，我是 95，解读是过度劳累，差点猝死。。。</p> <h2 id="_3-7"><a href="#_3-7" class="header-anchor">#</a> 3.7</h2> <p>上午体检，下午搬家</p> <h2 id="_3-6"><a href="#_3-6" class="header-anchor">#</a> 3.6</h2> <h3 id="找房"><a href="#找房" class="header-anchor">#</a> 找房</h3> <p>上周末看过一次，没找到合适的。这次带女朋友一块看的，本来决定租自如的。晚上回去又看到一个转租的，就约了下，还不错，就签了。</p> <p>一个没毕业的妹子转租的，中间为了 50%的转租费，扯了一会，小姐姐人挺好，我运气也不错。</p> <h2 id="_3-5"><a href="#_3-5" class="header-anchor">#</a> 3.5</h2> <p>在微医的最后一天，还要开技术评审。溜了溜了</p> <h3 id="算法打卡-2"><a href="#算法打卡-2" class="header-anchor">#</a> 算法打卡</h3> <p><a href="https://leetcode-cn.com/problems/find-the-duplicate-number/" target="_blank" rel="noopener noreferrer">287. 寻找重复数<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>给定一个包含  n + 1 个整数的数组  nums ，其数字都在 1 到 n  之间（包括 1 和 n），可知至少存在一个重复的整数。</p> <p>假设 nums 只有 一个重复的整数 ，找出 这个重复的数 。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">findDuplicate</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">nums</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  nums<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>map<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>v<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>v<span class="token punctuation">,</span> map<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  map<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v<span class="token punctuation">,</span> k<span class="token punctuation">,</span> map</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>v <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      res <span class="token operator">=</span> k<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">findDuplicate</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="_3-4"><a href="#_3-4" class="header-anchor">#</a> 3.4</h2> <h2 id="map-prototype-foreach"><a href="#map-prototype-foreach" class="header-anchor">#</a> Map.prototype.forEach()</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">logMapElements</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> key<span class="token punctuation">,</span> map</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">m[</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">] = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="react-hooks"><a href="#react-hooks" class="header-anchor">#</a> React hooks</h2> <p>React hooks: not magic, just arrays</p> <p>简单理解 hooks 工作原理是创建了两个一一对应的数组，如果使用 if 判断就会导致对应关系出错</p> <h3 id="删除排序数组中的重复项"><a href="#删除排序数组中的重复项" class="header-anchor">#</a> 删除排序数组中的重复项</h3> <p>给定一个排序数组，你需要在 原地 删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。</p> <p>不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。</p> <p><a href="https://leetcode-cn.com/problems/remove-duplicates-from-sorted-array/" target="_blank" rel="noopener noreferrer">leetcode26<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 双指针i j 一般用与解决双重循环对比问题</span>
<span class="token comment">// 如果两者不相等，就交换位置</span>
<span class="token keyword">function</span> <span class="token function">removeDuplicates</span><span class="token punctuation">(</span><span class="token parameter">nums<span class="token operator">:</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token operator">:</span> number <span class="token punctuation">{</span>
  <span class="token keyword">let</span> i<span class="token operator">:</span> number <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j<span class="token operator">:</span> number <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> nums<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>nums<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">!==</span> nums<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      i<span class="token operator">++</span><span class="token punctuation">;</span>
      nums<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> nums<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="_3-3"><a href="#_3-3" class="header-anchor">#</a> 3.3</h2> <h3 id="ts-基础文章"><a href="#ts-基础文章" class="header-anchor">#</a> ts 基础文章</h3> <p>基础部分大概总结完了，项目用到了在看，冲冲冲</p> <h2 id="_3-2"><a href="#_3-2" class="header-anchor">#</a> 3.2</h2> <h3 id="react-项目打包路径问题"><a href="#react-项目打包路径问题" class="header-anchor">#</a> react 项目打包路径问题</h3> <p>package.json 中添加<code>&quot;homepage&quot;: &quot;./&quot;,</code> 与'dependencies' 同级</p> <h3 id="nrm"><a href="#nrm" class="header-anchor">#</a> nrm</h3> <p>npm 源管理器</p> <ul><li>npm install -g nrm</li> <li>列出可选择的源:nrm ls</li> <li>切换使用的源:nrm use npm</li> <li>添加一个源:<code>nrm add &lt;registry&gt; &lt;url&gt;</code></li> <li>删除一个源:<code>nrm del &lt;registry&gt;</code></li> <li>测试源速度:nrm test</li></ul> <h3 id="craco-npm-包"><a href="#craco-npm-包" class="header-anchor">#</a> craco npm 包</h3> <p>使用 create-react-app 创建项目，不想 eject 项目但想对项目中 wepback 进行自定义配置的时候使用搞这个，项目根目录新建 craco.config.js 进行配置</p> <p>参考文章：<a href="https://blog.csdn.net/qq_39223195/article/details/106287522" target="_blank" rel="noopener noreferrer">使用 craco 配置基于 create-react-app 的开发环境<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="双问号操作符"><a href="#双问号操作符" class="header-anchor">#</a> 双问号操作符 ??</h3> <p>?? 替换||的运算符（只有 undefined 和 null 会返回默认值）,并提供默认值;</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&gt;</span> <span class="token keyword">undefined</span> <span class="token operator">??</span> <span class="token string">'default'</span>
<span class="token string">'default'</span>
<span class="token operator">&gt;</span> <span class="token keyword">null</span> <span class="token operator">??</span> <span class="token string">'default'</span>
<span class="token string">'default'</span>
<span class="token operator">&gt;</span> <span class="token boolean">false</span> <span class="token operator">??</span> <span class="token string">'default'</span>
<span class="token boolean">false</span>
<span class="token operator">&gt;</span> <span class="token string">''</span> <span class="token operator">??</span> <span class="token string">'default'</span>
<span class="token string">''</span>
<span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">??</span> <span class="token string">'default'</span>
<span class="token number">0</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="可选链操作符"><a href="#可选链操作符" class="header-anchor">#</a> 可选链操作符 ?.</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> res <span class="token operator">&amp;&amp;</span> res<span class="token punctuation">.</span>data <span class="token operator">&amp;&amp;</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>list<span class="token punctuation">;</span>
<span class="token comment">// 等同于</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> res<span class="token operator">?.</span>data<span class="token operator">?.</span>list<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="_3-1"><a href="#_3-1" class="header-anchor">#</a> 3.1</h2> <h3 id="ts-学习"><a href="#ts-学习" class="header-anchor">#</a> ts 学习</h3> <p>见 ts 学习笔记</p> <h3 id="react-ts-his-系统开发"><a href="#react-ts-his-系统开发" class="header-anchor">#</a> react + ts his 系统开发</h3> <p>练手的过程遇到很多问题，继续冲冲冲，演示地址：<a href="https://alexwjj.github.io/his/index.html" target="_blank" rel="noopener noreferrer">俊劫 his 系统<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div></div> <div class="page-edit"><div class="tags"><a href="/tags/?tag=%E5%AD%A6%E4%B9%A0%E6%89%93%E5%8D%A1" title="标签">#学习打卡</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/05/01 17:06:28</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/98a7a4ab3b308/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">【跳槽月】2月完结</div></a> <a href="/pages/136f8f068dffe/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">【React主题月】4月完结</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/98a7a4ab3b308/" class="prev">【跳槽月】2月完结</a></span> <span class="next"><a href="/pages/136f8f068dffe/">【React主题月】4月完结</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-4"><div class="article-title"><a href="/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/pages/512f6ae339a31/"><div>【TypesScript主题月】5.7</div></a></div> <div class="date"><span>2021/05/06 00:00:00</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/pages/136f8f068dffe/"><div>【React主题月】4月完结</div></a></div> <div class="date"><span>2021/04/30 00:00:00</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/pages/55e7bb3eb7802/"><div>【算法打卡】先来一个波集合</div></a></div> <div class="date"><span>2021/04/22 00:00:00</span></div></dt></dl> <div class="more-box"><a href="/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-51417878 data-v-51417878><span class="footer-reco-theme" data-v-51417878><i class="iconfont reco-github" data-v-51417878></i> <a target="blank" href="https://github.com/alexwjj/alexwjj.github.io" data-v-51417878>alexwjj.github.io@5.0</a></span> <!----> <span class="footer-copyright" data-v-51417878><i class="iconfont reco-copyright" data-v-51417878></i> <a data-v-51417878><span data-v-51417878>俊劫</span> <span class="ml5" data-v-51417878>
          2018 - 2021
        </span></a></span> <span class="footer-view-site" data-v-51417878><i class="iconfont reco-eye" data-v-51417878></i> <span id="busuanzi_container_site_uv" data-v-51417878>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-51417878>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-51417878>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-51417878>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div></div></div>
    <script src="/assets/js/app.070ad525.js" defer></script><script src="/assets/js/2.1d15da37.js" defer></script><script src="/assets/js/19.4a02bf41.js" defer></script><script src="/assets/js/4.aab0e518.js" defer></script>
  </body>
</html>
